<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>系统首页</title>
    <!-- Bootstrap Styles-->
    <link href="../assets/css/bootstrap.css" rel="stylesheet" />
    <!-- FontAwesome Styles-->
    <link href="../assets/css/font-awesome.css" rel="stylesheet" />
    <!-- Morris Chart Styles-->
    <link href="../assets/js/morris/morris-0.4.3.min.css" rel="stylesheet" />
    <!-- Custom Styles-->
    <link href="../assets/css/custom-styles.css" rel="stylesheet" />
    <!-- Google Fonts-->
    <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css' />
    <!-- 自定义样式文件 -->
    <link href="../assets/css/dhg-styles.css" rel="stylesheet" />
</head>
<style>
 .tz{
     color: #fff9ec;
 }


 a:link,a:visited{
     text-decoration:none;  /*超链接无下划线*/
 }

</style>
<body>
<div id="page-inner">
    <div class="row">
        <div class="col-md-12">
            <h3 class="page-header">
                首页
            </h3>
        </div>
    </div>
    <!--<small>Summary of your App</small>
    <!-- /. ROW  -->

    <div class="row">
        <div class="col-md-3 col-sm-12 col-xs-3">
            <div class="panel panel-primary text-center no-boder bg-color-green">
                <div class="panel-body">
                    <i class="fa fa-bar-chart-o fa-3x"></i>
                    <h3>8,457</h3>
                </div>
                <div class="panel-footer back-footer-green">
                     <a  class="tz" href="wxGoods.html">拼团订单</a>
                </div>
            </div>
        </div>
        <div class="col-md-3 col-sm-12 col-xs-3">
            <div class="panel panel-primary text-center no-boder bg-color-blue">
                <div class="panel-body">
                    <i class="fa fa-shopping-cart fa-3x"></i>
                    <h3>52,160 </h3>
                </div>
                <div class="panel-footer back-footer-blue">
                    <a  class="tz" href="wxGoods.html">拼团商品</a>
                </div>
            </div>
        </div>
        <div class="col-md-3 col-sm-12 col-xs-3">
            <div class="panel panel-primary text-center no-boder bg-color-red">
                <div class="panel-body">
                    <i class="fa fa fa-comments fa-3x"></i>
                    <h3>15,823 </h3>
                </div>
                <div class="panel-footer back-footer-red">
                    <a  class="tz" href="wxGoods.html">粉丝</a>
                </div>
            </div>
        </div>
        <div class="col-md-3 col-sm-12 col-xs-3">
            <div class="panel panel-primary text-center no-boder bg-color-brown">
                <div class="panel-body">
                    <i class="fa fa-users fa-3x"></i>
                    <h3>36,752 </h3>
                </div>
                <div class="panel-footer back-footer-brown">
                    <a  class="tz" href="wxGoods.html">团长</a>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-3 col-sm-12 col-xs-3">
            <div class="panel panel-primary text-center no-boder bg-color-green">
                <div class="panel-body">
                    <i class="fa  fa-signal fa-3x"></i>
                    <h3>8,457</h3>
                </div>
                <div class="panel-footer back-footer-green">
                    <a  class="tz" href="wxGoods.html">昨日订单数量</a>
                </div>
            </div>
        </div>
        <div class="col-md-3 col-sm-12 col-xs-3">
            <div class="panel panel-primary text-center no-boder bg-color-blue">
                <div class="panel-body">
                    <i class="fa fa-signal fa-3x"></i>
                    <h3>52,160 </h3>
                </div>
                <div class="panel-footer back-footer-blue">
                    <a  class="tz" href="wxGoods.html">昨日交易额</a>
                </div>
            </div>
        </div>
        <div class="col-md-3 col-sm-12 col-xs-3">
            <div class="panel panel-primary text-center no-boder bg-color-red">
                <div class="panel-body">
                    <i class="fa fa fa-comments fa-3x"></i>
                    <h3>15,823 </h3>
                </div>
                <div class="panel-footer back-footer-red">
                    <a  class="tz" href="wxGoods.html">粉丝数量</a>
                </div>
            </div>
        </div>
        <div class="col-md-3 col-sm-12 col-xs-3">
            <div class="panel panel-primary text-center no-boder bg-color-brown">
                <div class="panel-body">
                    <i class="fa fa-users fa-3x"></i>
                    <h3>36,752 </h3>
                </div>
                <div class="panel-footer back-footer-brown">
                    <a  class="tz" href="wxGoods.html">团长数量</a>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-6 col-sm-6 col-xs-6">
            <div id="main" style="width: 796px;height:400px;border: solid 1px #C7D1DD;"></div>
        </div>
        <div class="col-md-6 col-sm-6 col-xs-6">
            <div id="mains" style="width: 796px;height:400px;border: solid 1px #C7D1DD;"></div>
        </div>
    </div>


<!--    <div class="row">
        <div class="col-md-9 col-sm-12 col-xs-12">
            <div class="panel panel-default">
                <div class="panel-heading">
                    Bar Chart Example
                </div>
                <div class="panel-body">
                    <div id="morris-bar-chart"></div>
                </div>
            </div>
        </div>
        <div class="col-md-3 col-sm-12 col-xs-12">
            <div class="panel panel-default">
                <div class="panel-heading">
                    Donut Chart Example
                </div>
                <div class="panel-body">
                    <div id="morris-donut-chart"></div>
                </div>
            </div>
        </div>
    </div>-->
    <!-- /. ROW  -->

 <!--   <div class="row">
        <div class="col-md-4 col-sm-12 col-xs-12">
            <div class="panel panel-default">
                <div class="panel-heading">
                    Tasks Panel
                </div>
                <div class="panel-body">
                    <div class="list-group">

                        <a href="#" class="list-group-item">
                            <span class="badge">7 minutes ago</span>
                            <i class="fa fa-fw fa-comment"></i> Commented on a post
                        </a>
                        <a href="#" class="list-group-item">
                            <span class="badge">16 minutes ago</span>
                            <i class="fa fa-fw fa-truck"></i> Order 392 shipped
                        </a>
                        <a href="#" class="list-group-item">
                            <span class="badge">36 minutes ago</span>
                            <i class="fa fa-fw fa-globe"></i> Invoice 653 has paid
                        </a>
                        <a href="#" class="list-group-item">
                            <span class="badge">1 hour ago</span>
                            <i class="fa fa-fw fa-user"></i> A new user has been added
                        </a>
                        <a href="#" class="list-group-item">
                            <span class="badge">1.23 hour ago</span>
                            <i class="fa fa-fw fa-user"></i> A new user has added
                        </a>
                        <a href="#" class="list-group-item">
                            <span class="badge">yesterday</span>
                            <i class="fa fa-fw fa-globe"></i> Saved the world
                        </a>
                    </div>
                    <div class="text-right">
                        <a href="#">More Tasks <i class="fa fa-arrow-circle-right"></i></a>
                    </div>
                </div>
            </div>

        </div>
        <div class="col-md-8 col-sm-12 col-xs-12">

            <div class="panel panel-default">
                <div class="panel-heading">
                    Responsive Table Example
                </div>
                <div class="panel-body">
                    <div class="table-responsive">
                        <table class="table table-striped table-bordered table-hover">
                            <thead>
                            <tr>
                                <th>S No.</th>
                                <th>First Name</th>
                                <th>Last Name</th>
                                <th>User Name</th>
                                <th>Email ID.</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr>
                                <td>1</td>
                                <td>John</td>
                                <td>Doe</td>
                                <td>John15482</td>
                                <td>name@site.com</td>
                            </tr>
                            <tr>
                                <td>2</td>
                                <td>Kimsila</td>
                                <td>Marriye</td>
                                <td>Kim1425</td>
                                <td>name@site.com</td>
                            </tr>
                            <tr>
                                <td>3</td>
                                <td>Rossye</td>
                                <td>Nermal</td>
                                <td>Rossy1245</td>
                                <td>name@site.com</td>
                            </tr>
                            <tr>
                                <td>4</td>
                                <td>Richard</td>
                                <td>Orieal</td>
                                <td>Rich5685</td>
                                <td>name@site.com</td>
                            </tr>
                            <tr>
                                <td>5</td>
                                <td>Jacob</td>
                                <td>Hielsar</td>
                                <td>Jac4587</td>
                                <td>name@site.com</td>
                            </tr>
                            <tr>
                                <td>6</td>
                                <td>Wrapel</td>
                                <td>Dere</td>
                                <td>Wrap4585</td>
                                <td>name@site.com</td>
                            </tr>

                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

        </div>
    </div>-->
    <!-- /. ROW  -->
   <!-- <footer><p>All right reserved. Template by: <a
            href="http://webthemez.com">WebThemez</a></p></footer>-->
</div>
<script src="../assets/js/jquery-3.4.1.min.js"></script>
<!-- Bootstrap Js -->
<script src="../assets/js/bootstrap.min.js"></script>
<!-- Metis Menu Js -->
<script src="../assets/js/jquery.metisMenu.js"></script>
<!-- Morris Chart Js -->
<script src="../assets/js/morris/raphael-2.1.0.min.js"></script>

<script src="../assets/js/echarts.min.js"></script>

<script src="../assets/js/macarons.js"></script>
</body>
<script type="text/javascript">

    var myChart = echarts.init(document.getElementById('main'),'macarons');

    option = {
        title : {
            text: '订单销售',
            //subtext: '纯属虚构'
        },
        tooltip : {
            trigger: 'axis'
        },
        toolbox: {
            show : true,
            feature : {
                mark : {show: true},
                dataView : {show: true, readOnly: false},
                magicType: {show: true, type: ['line', 'bar']},
                restore : {show: true},
                saveAsImage : {show: true}
            }
        },
        calculable : true,
        legend: {
            data:['订单量','订单金额']
        },
        xAxis : [
            {
                type : 'category',
                data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
            }
        ],
        yAxis : [
            {
                type : 'value',
                name : '订单数量',
                axisLabel : {
                    formatter: '{value} '
                }
            },
            {
                type : 'value',
                name : '订单金额',
                axisLabel : {
                    formatter: '{value}元'
                }
            }
        ],
        series : [

            {
                name:'订单量',
                type:'bar',
                data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
            },
            {
                name:'订单金额',
                type:'bar',
                data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
            },
          /*  {
                name:'平均温度',
                type:'line',
                yAxisIndex: 1,
                data:[2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
            }*/
        ]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);



    var myCharts = echarts.init(document.getElementById('mains'),'macarons');
    options = {
        title : {
            text: '用户数量',
            //subtext: '纯属虚构'
        },
        tooltip : {
            trigger: 'axis'
        },
        legend: {
            data:['团长','用户量']
        },
        toolbox: {
            show : true,
            feature : {
                mark : {show: true},
                dataView : {show: true, readOnly: false},
                magicType : {show: true, type: ['line', 'bar']},
                restore : {show: true},
                saveAsImage : {show: true}
            }
        },
        calculable : true,
        xAxis : [
            {
                type : 'category',
                data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
            }
        ],
        yAxis : [
            {
                type : 'value'
            }
        ],
        series : [
            {
                name:'团长',
                type:'bar',
                data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
                markPoint : {
                    data : [
                        {type : 'max', name: '最大值'},
                        {type : 'min', name: '最小值'}
                    ]
                },
                markLine : {
                    data : [
                        {type : 'average', name: '平均值'}
                    ]
                }
            },
            {
                name:'用户量',
                type:'bar',
                data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
                markPoint : {
                    data : [
                        {name : '年最高', value : 182.2, xAxis: 7, yAxis: 183, symbolSize:18},
                        {name : '年最低', value : 2.3, xAxis: 11, yAxis: 3}
                    ]
                },
                markLine : {
                    data : [
                        {type : 'average', name : '平均值'}
                    ]
                }
            }
        ]
    };


    // 使用刚指定的配置项和数据显示图表。
    myCharts.setOption(options);
</script>
</html>